<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}新闻{% endblock %}</title>
        {% load static %}
        <script src="/static/js/jQuery.js"></script>
        <script src="/static/js/bootstrap1/js/bootstrap.js"></script>
        <script src="/static/js/swiper.js"></script>
        <link rel="stylesheet" href="{% static 'news/css/base.css' %}">
        <link rel="stylesheet" href="/static/css/swiper.css">
        <link rel="stylesheet" href="{% static 'news/css/base_news.css' %}">

        {% block style %}
        {% endblock %}
    </head>
    <body>
        {% block nav %}
            {#导航栏#}
            <div class="nav">
                <!--标题-->
                <div class="title">
                    <!--左边-->
                    {% block t_left %}
                        <div class="t_left">
                            <a href=""><img src="{% static 'news/media/web/logo.png' %}"></a>
                        </div>
                    {% endblock %}
                    <!--右边-->
                    {% block t_r %}
                        <div id="t_r">
                            <div class="user_down">
                                <a href="{% url 'news:fbnr' %}"><input type="submit" value="发布内容" name="fabu"></a>
                                <div class="user_1"><a href="{% url 'news:people' %}"><img src="{% url 'media' author.photo %}"></a></div>

                            </div>


                        </div>

                    {% endblock %}

                </div>
            </div>
        {% endblock %}



    {#    左边#}
        {% block l_left %}
            <div id="news">
                <div class="l_left">
                    {% block lt_left %}
                    <div class="lt_left">
                        <div class="swiper-container s_left">
                            <div class="swiper-wrapper">
                                {% for article in article_list %}
                                 <div class="swiper-slide"><img src="{% url 'media' article.image %}"></div>

                                {% endfor %}

                            </div>
                            <!-- 如果需要导航按钮 -->
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                        <div class="s1_right">
                            <img src="{% url 'media' author.photo %}" style="width: 246px; height: 122px;background-repeat: repeat">
                        </div>
                        <div class="s2_right">
                            <img src="{% url 'media' author.photo %}" style="width: 246px; height: 122px;background-repeat: repeat">
                        </div>
                    </div >
                    {% endblock %}


                    {% block top %}
                    {#   栏目列表  #}
                    <div class="l_top">
                        <div></div>
                        <a href="{% url 'news:base_news' %}?type=1">新闻</a>
                        <a href="{% url 'news:base_news' %}?type=4">政策</a>
                        <a href="{% url 'news:base_news' %}?type=2">行情</a>
                        <a href="{% url 'news:base_news' %}?type=3">技术</a>
                    </div>
                    {% endblock %}


                    {% block l_dwon %}
                        {#   左侧新闻展示  #}
                        <ul class="content">
                            {% for article in article_list %}
                                <li>
                                    <img class="art1" src="{% url 'media' article.image %}">
                                    <h3 class="art2"><a href="{% url 'news:news_xq' %}?news_id={{ article.id }}">{{ article.title }}</a></h3>
                                    <p class="art3">{{ article.content|striptags }}</p>
                                    <p class="art5">{{ article.digist }}</p>
                                    <p class="art6">{{ article.distribute_time|date:'Y-m-d' }}</p>
                                    <p class="art7">
                                        <img src="{% static 'news/media/web/k_02.png' %}">分享
                                    </p>
                                    <p class="art8">
                                        <img src="{% static 'news/media/xiaochengxu/k_03@2x.png' %}">
                                        <span>{{ article.votes_count }}</span>
                                    </p>
                                </li>
                            {% endfor %}
                        </ul>

                        <div class="l8_down">
                            <button class="jia" a="1">加载更多</button>
                        </div>
                    {% endblock %}

                </div>
            </div>
        {% endblock %}


        {#    右边#}
        {% block n_right %}
            <form action="" method="post">
                {# 快讯模块 #}
                <div class="n_right">
                    <p></p>
                    <a href="{% url 'news:news_kx' %}"><span>快讯</span></a>
                    <ul class="articlessss">
                        {% for article in ar_list %}
                            <li class="articl">
                                <p class="g1"><img src="{% static 'news/media/web/b_s.png' %}"><a href="{% url 'news:news_kxxq' %}?news_id={{ article.id }}">{{ article.title }}</a></p>
                                <p class="g2"><span>{{ article.content }}</span></p>
                                <p class="g3">
                                    <span>{{ article.distribute_time|date:'Y-m-d' }}</span>
                                    <a><img src="{% static 'news/media/xiaochengxu/k_03@2x.png' %}">{{ article.votes_count }}</a>
                                    <a><img src="{% static 'news/media/web/k_03.png' %}">分享</a>
                                </p>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </form>
        {% endblock %}


        {% block n_down %}
            <form action="" method="post">
                <div class="n_down">
                    <p></p>
                    <a href=""><span>热门新闻</span></a>
                    <div class="n1_down">
                        <div class="swiper-container left">
                            <div class="swiper-wrapper">

                                {% for article in article_list %}
                                 <div class="swiper-slide"><img src="{% url 'media' article.image %}"></div>

                                {% endfor %}

                            </div>
                            <div class="n2_down">
                                <span>去香港，收割一个时代</span>
                            </div>
                        </div>
                    </div>
                    <ul class="n3_down">
                        {% for article in art_list %}
                        <li>
                            <img class="art1" src="{% url 'media' article.image %}">
                            <p class="art3"><a href="{% url 'news:news_xq' %}?news_id={{ article.id }}" style="text-decoration: none; color: #303741;
    ">{{ article.content|striptags }}</a></p>
                            <p class="art6">{{ article.distribute_time|date:'Y-m-d' }}</p>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </form>
        {% endblock %}
    </body>
</html>
{% block js %}
    <script src="/static/js/jQuery.js"></script>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        {#direction: 'vertical', // 垂直切换选项#}
        loop: true, // 循环模式选项
        autoplay:true,//等同于以下设置


      // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },


    });

    // btn 加载更多
     $('.jia').click(function () {

        $('.content').html('');
        status = $(this).attr('a');
        $('.jia').prop('class', '');
        $(this).prop('class', 'jia');
        $.ajax({
            type: 'get',
            url: "{% url 'news:base_news_ajax' %}",
            data: {'status': status},
            success: function(data) {
                loadDataAndShow(data);
            },
            error: function (e) {
                console.log(e);
            }
        });

        function loadDataAndShow(data) {
            if (!$.isArray(data)) return;
            data.forEach(function (e, index) {
                li = $('<li/>');
                img = $('<img/>');
                img.attr("src","{% url 'media' '' %}"+ e.image).addClass('art1');
                h3 = $('<h3/>').html(e.title).addClass('art2');
                p1 = $('<p/>').html(e.content).addClass('art3');
                p2 = $('<p/>').html(e.digist).addClass('art5');
                {#console.log(e.distribute_time);#}
                time = e.distribute_time.split('T')[0];
                p3 = $('<p/>').html(time).addClass('art6');
                p4 = $('<p/>').append($('<img/>').attr("src", "{% static 'news/media/web/k_02.png' %}" ).addClass('art9')).append($('<b/>').html('分享').addClass('p1'));
                p5 = $('<p/>').append($('<img/>').attr("src", "{% static 'news/media/xiaochengxu/k_03@2x.png' %}").addClass('art11')).append($('<span/>').html(e.votes_count).addClass('p2'));
                console.log(e.votes_count);
                li.append(img,h3,p1,p2,p3,p4,p5);
                $('.content').append(li);
            });
        }
     });


     {#点击内容伸缩#}
     $('.articl').click(function () {
         $(this).children('.g2').css('display','block');
         $(this).children('.g1>a').css('color', 'blue');
         $(this).siblings().children('.g1>a').css('color','black');
         $(this).siblings().children('.g2').css('display','none');
     });
</script>

{% endblock %}



